<template>
  <div>
    <panel>
      <div>
        <a-button>Danger</a-button>
        <a-button>Success</a-button>
        <a-button type="primary" class="btn_grey">Success</a-button>
        <a-button type="primary" class="btn_purple">Success</a-button>
        <a-button type="primary" class="btn_indigo">Success</a-button>
        <a-button type="primary" class="btn_primary">Success</a-button>
        <a-button type="primary" class="btn_info">Success</a-button>
        <a-button type="primary" class="btn_warning">Waring</a-button>
        <a-button type="primary" class="btn_pink">Danger</a-button>
        <a-button type="primary" class="btn_danger">Success</a-button>
        <a-button type="primary" class="btn_success">Primary</a-button>
        <a-button type="primary" class="btn_green">Dark</a-button>
        <a-button type="primary" class="btn_lime">Error</a-button>
        <a-button type="primary" class="btn_inverse">Error</a-button>
        <a-button type="link" style="border: none !important">Link</a-button>
      </div>
    </panel>
    <panel>
      <div>
        <a-button type="primary" class="xxx_bigSize noOutline">
          Primary
        </a-button>
        <a-button type="primary" class="xxx_middleSize noOutline">
          Primary
        </a-button>
        <a-button type="primary" class="xxx_smallSize noOutline">
          Primary
        </a-button>
        <br />
        <a-button class="xxx_bigSize">Primary</a-button>
        <a-button class="xxx_middleSize">Primary</a-button>
        <a-button class="xxx_smallSize">Primary</a-button>
      </div>
    </panel>
    <panel>
      <div>
        <card cardClass="card_left">
          <template #cardLeft>
            <SmileOutlined />
          </template>
        </card>
        <card cardClass="card_right">
          <template #cardRight>
            <SmileOutlined />
          </template>
        </card>
        <card></card>
        <!-- <div class="card_left">
                <span>
                    <SmileOutlined/>
                </span>
                <span>
                    <h4>1111111111111111</h4>
                    <p>2222222222222222222</p>
                </span>
            </div>
            <div class="card_right">
                <span>
                    <h4>1111111111111111</h4>
                    <p>2222222222222222222</p>
                </span>
                <span>
                    <SmileOutlined/>
                </span>
            </div>
            <div class="card_no">
                <span>
                    <h4>1111111111111111</h4>
                    <p>2222222222222222222</p>
                </span>
                
            </div> -->
      </div>
    </panel>
  </div>
</template>
<script>
  import { SmileOutlined } from '@ant-design/icons-vue'
  import { defineComponent } from 'vue'
  import panel from '@/plugins/panel/Panel.vue'
  import card from '@/mycomponents/card/card.vue'
  export default defineComponent({
    components: {
      panel,
      SmileOutlined,
      card,
    },
    setup() {
      return {}
    },
  })
</script>
<style lang="less" scoped>
  @import '@/plugins/button/theButton.less';
  ::v-deep(.ant-notification-notice-closable) {
    background-color: red !important;
    width: 300px !important;
  }
</style>
